<template>
  <el-scrollbar>
    <div class="app-container">
      <div class="filter-container"
           size="small">
        <!-- <el-input
          v-model="listQuery.title"
          size="small"
          placeholder="标题"
          style="width: 200px"
          class="filter-item"
          clearable
        /> -->

        <!--时间选择器控件 -->
        <el-date-picker id="DatePicker"
                        v-model="rangeDate"
                        prefix-icon="el-icon-date"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        value-format="yyyy-MM-dd">
        </el-date-picker>

        <!--搜索按钮 -->
        <el-button class="filter-item"
                   size="small"
                   icon="el-icon-search"
                   type="primary"
                   plain
                   @click="search()">
          {{ $t("table.search") }}
        </el-button>

        <el-button size="small"
                   class="filter-item right"
                   icon="el-icon-refresh"
                   type="primary"
                   plain
                   @click="refresh()"> 刷新
        </el-button>
      </div>

      <el-table ref="multipleTable"
                v-loading="listLoading"
                :data="list"
                :height="
          listQuery.total > 0 ? 'calc(100vh - 205px)' : 'calc(100vh - 170px)'
        "
                :header-cell-style="{ background: '#F2F6FC' }"
                element-loading-text="Loading"
                fit
                border
                size="medium">
        <el-table-column label="序号"
                         width="50"
                         type="index"
                         align="center"></el-table-column>

        <el-table-column label="拉取日志信息"
                         prop="logInfo"
                         align="center">
        </el-table-column>
        <el-table-column label="新增条数"
                         prop="pullCount"
                         align="center"></el-table-column>
        <el-table-column label="开始时间"
                         prop="createTime"
                         align="center"></el-table-column>
        <el-table-column label="结束时间"
                         prop="endTime"
                         align="center"></el-table-column>
      </el-table>
      <!--分页-->
      <pagination v-show="listQuery.total > 0"
                  :total="listQuery.total"
                  :page.sync="listQuery.page"
                  :limit.sync="listQuery.limit"
                  @pagination="fetchData" />
    </div>
  </el-scrollbar>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getAction } from '@/api/common'

export default {
  name: 'index',
  components: {
    Pagination
  },
  data() {
    return {
      listLoading: true,
      list: [],
      rangeDate: [],
      // 列表搜索条件
      listQuery: {
        page: 1,
        total: 0,
        limit: 20,
        name: '',
        state: '',
        ctime: null,
        etime: null,
        SbyDaeteTime: null,
        EbyDaeteTime: null
      },
      rowData: {},
      showState: false,
      showViewState: false
    }
  },

  created() {
    this.fetchData()
  },
  watch: {
    rangeDate: function (newVal) {
      if (newVal !== null) {
        this.tableParams.beginDate = newVal[0]
        this.tableParams.endDate = newVal[1]
      } else {
        this.tableParams.beginDate = null
        this.tableParams.endDate = null
      }
    }
  },
  methods: {
    async fetchData() {
      //  console.log(SbyDaeteTime);console.log(EbyDaeteTime);
      this.listLoading = true
      const { data } = await getAction(
        this.listQuery,
        'BuyerData/BuyerDataLogIndex'
      )
      this.list = data.items
      this.listQuery.total = data.total
      this.listLoading = false
    },
    search() {
      this.listQuery.ctime = this.rangeDate[0]
      this.listQuery.etime = this.rangeDate[1]
      // console.log(this.rangeDate[0]);
      // console.log(this.rangeDate[1]);
      // this.rangeDate.forEach( items=> {
      //   console.log(items);
      // });
      this.listQuery.page = 1
      this.fetchData()
    },
    refresh() {
      this.fetchData()
    },
    closeAction() {
      this.showState = false
      this.showViewState = false
      this.fetchData()
    }
  }
}
</script>

<style scoped>
</style>